<script setup>
const props = defineProps(['cardInfo'])
</script>
<template>
  <div :class="cardInfo.color" :style="cardInfo.color">
    <yk-space justify="between" align="center">
      <yk-space :size="8" dir="vertical">
        <div class="name" :style="{ color: cardInfo.addPath ? '@gray-8' : 'rgba(255, 255, 255, 0.72)' }">{{ cardInfo.name }}</div>
        <router-link :to="cardInfo.path">
          <div class="info" :style="{ color: cardInfo.addPath ? '@gray' : 'white' }">{{ cardInfo.total }}</div>
        </router-link>
      </yk-space>
      <router-link class="add" v-if="cardInfo.addPath" :to="cardInfo.addPath">
        <IconPlusOutline class="icon" />
      </router-link>
    </yk-space>
  </div>
</template>

<style scoped lang='less'>
 div[class *='background'] {
  width: calc((100% - 32px) / 3);
  height: 125px;
  padding: 24px;
  border-radius: 8px;

  .add {
    height: 48px;
    line-height: 48px;
    width: 48px;
    border-radius: 8px;
    
    background: @gray-1;
  
    .icon {
      margin: auto 50%;
      translate: -50%;
      color: @gray-10;
    }
  }

  .info {
    height: 42px;
    font-size: 32px;
    font-weight: 500;
    color: @gray-10;
  }
}
</style>